<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">
        <meta name="description" content="">
    <title>Oauth Approval</title>
</head>
<style>
    body {
        margin: 50px 20px 20px;
        font-size: 18px;
    }
    h3 {
        margin-top: 20px;
    }
    .app_name {
        font-weight: bold;
    }
    .app_info img {
        vertical-align: middle;
        width: 24px;
        height: 24px;
    }
    .user_tip {
        font-size: 0.9rem;
    }
    .user_info {
        display: flex;
        align-items: center;
        align-content: space-between;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    .user_info .img {
        width: 54px;
        height: 54px;
    }
    .user_info .img img {
        width: 50px;
        height: 50px;
        border: 1px solid #eee;
        padding: 1px;
        border-radius: 4px;
    }
    .main_info {
        flex: 1;
        padding-left: 10px;
    }
    .checked {
        position: relative;
    }
    .checkbox{
        display: inline-block;
        position: relative;
        border: 1px solid #dcdfe6;
        border-radius: 2px;
        box-sizing: border-box;
        width: 24px;
        height: 24px;
        background-color: #fff;
        z-index: 1;
        transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
    }
    .checkbox:after {
        box-sizing: content-box;
        content: " ";
        border: 2px solid #fff;
        border-color: #c0c4cc;
        border-left: 0;
        border-top: 0;
        height: 14px;
        left: 8px;
        position: absolute;
        top: 2px;
        width: 6px;
        transition: transform .15s ease-in .05s;
        transform-origin: center;
        transform: rotate(45deg) scaleY(1);
    }
    .disabled.checkbox {
        background-color: #f2f6fc;
        border-color: #dcdfe6;
    }
    .disabled.checkbox:after {
        cursor: not-allowed;
    }
.btn {
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    line-height: 2.33333333;
    border-radius: 5px;
    overflow: hidden;
    width: 100%;
    border-width: 0;
    outline: 0;
    -webkit-appearance: none;
}
.btn-success {
    background-color: #1aad19;
    margin: 50px 0 20px;
}

.btn-warning {
    background-color: #f66;
}

</style>
<body>
<p class="app_info"><img th:src="${clientIcon}" /> <span class="app_name">

    <span th:text="${clientName}"></span>
    申请使用
</span>
</p>
    <h3>你的尤信头像、昵称、地区、性别和好友关系</h3>

<p class="user_tip">你可以使用如下个人信息登录</p>
<div class="user_info">
    <div class="img"><img th:src="${avatar}" /></div>
    <div class="main_info">
        <p><strong><span th:text="${nickName}"></span></strong><br />
        尤信个人信息</p>
    </div>
    <div class="checked">
        <span class="checkbox disabled"></span>
    </div>
</div>

<form id='confirmationForm' name='confirmationForm' th:action="@{/authz/oauth/authorize}"
      method='post'>
    <input type="hidden" name="client_id" th:value="${param.client_id}"/>
    <input type="hidden" name="scope" th:value="${param.scope}"/>
    <input type="hidden" name="response_type" th:value="${response_type}"/>
    <input type="hidden" name="redirect_uri" th:value="${redirect_uri}"/>
    <input type="hidden" name="state" th:value="${param.state}"/>
    <input type="hidden" name="client_secret" th:value="${param.client_secret}"/>

    <input name='user_oauth_approval' value='true' type='hidden'/>
    <label> <input value='授权' type='submit' class="btn btn-success"/></label>
</form>

<form id='denialForm' name='denialForm' th:action="@{/authz/oauth/authorize}" method='post'>
    <input type="hidden" name="client_id" th:value="${param.client_id}"/>
    <input type="hidden" name="scope" th:value="${param.scope}"/>
    <input type="hidden" name="response_type" th:value="${response_type}"/>
    <input type="hidden" name="redirect_uri" th:value="${redirect_uri}"/>
    <input type="hidden" name="state" th:value="${param.state}"/>
    <input type="hidden" name="client_secret" th:value="${param.client_secret}"/>

    <input name='user_oauth_approval' value='false' type='hidden'/>
    <label><input value='拒绝' type='submit' class="btn btn-warning"/></label>
</form>
</body>
</html>
